<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .flow-box {
     background-color: #eee; 
  }
  .flow-content {
    /* 内容部分，左右留出固定宽度 */
      margin-left: 150px;
      margin-right: 150px;
  }




/* 下面为BFC方式 */
  .container {
    background-color: #d3a382;
  }

  .content {
    /* 内容部分，只需要转为BFC,其宽度充满左右两列留下的空间 */
    overflow: hidden;
  }
  .float-left {
    float: left;

    /* 下面为了留有间隙，不与中间部分亲密接触 */
    margin-right: 20px;  
  }
  .float-right {
    float: right;
    /* 下面为了留有间隙，不与中间部分亲密接触 */
    margin-left: 20px;
  }
  </style>
</head>
<body>
  <p>块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器<br/>
  利用此元素特性（或叫流体特性），实现如下三列中间部分的自适应布局(调整浏览器宽度体验效果)<br/>
  缺点：左右两列宽度必须固定 <br>
  注意：此处不同于“双飞翼”，“双飞翼”优先加载和渲染中间部分
</p>
  <div class="flow-box">
    <img src="mm1.jpg" width="128" style="float:left;">
    <img src="mm1.jpg" width="128" style="float:right;">        
    <div class="flow-content"><img src="mm1.jpg" width="100%" height="190"></div>
      
  </div>
  <hr>
  <p>使用BFC实现三栏自适应布局
    <br>左右两栏设置为float,中间部分只需要overflow: hidden;即可
    <br>优点：左右两列宽度不是固定的，是根据左右两列内容的宽度自动调整的
  </p>
  <div class="container">
    <img src="mm1.jpg" width="128" class="float-left">
    <img src="mm1.jpg" width="128" class="float-right"> 
    <div class="content"><img src="mm1.jpg" width="100%" height="190"></div>
  </div>

  
</body>
</html>